{% extends "./layout/layout.html" %}
{# 引入宏 #}
{% import './macro/blog-list.html' as list %}
{% import './macro/loadMore.html' as loadBtn %}
{% import './macro/user-info.html'as user %}
{% import './macro/fans.html'as fans %}
{% import './macro/follower.html'as follower %}

{% block headCss %}
<link rel="stylesheet" href="/css/home.css">
{% endblock %}

{% block content %}
<div class="container">

  <div class="row">
    <!-- 左侧 -->
    <div class="col-lg-8 left">
      <div class="create-blog">
        <textarea name="" id="blog-content"></textarea>
        <button id="btn-publish" class="btn btn-primary">发表</button>
        <svg width="1.0625em" height="1em" viewBox="0 0 17 16" class="bi bi-image" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.002 2h-12a1 1 0 0 0-1 1v9l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094L15.002 9.5V3a1 1 0 0 0-1-1zm-12-1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm4 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
          />
        </svg>
        <input type="file" id="file-img">
        <!-- input 作用是存放图片上传后的url地址 -->
        <input type="hidden" value="" id="file-img-url">
        <a href="" id="img-upload">插入一张图片</a>
        <!-- 上传成功后的提示信息 -->
        <span class="img-info"></span>
        <hr>
      </div>
    <!-- 博客列表 -->
    <div class="item-wrapper">
      {% for item in blogList %}
      {{ list.list(item) }}
      {% endfor %}
    </div>
    <!-- 加载更多 -->
    {{ loadBtn.loadMore(
      pageIndex,
      pageSize,
      count,
      api = '/api/blog/loadHomeBlogMore/'
    )}}
    </div>
    <!-- 右侧 -->
      <div class="col-lg-4 users">
        {{user.userInfo(
          user = userData.userInfo,
          isMe = userData.isMe,
          isMeFollow = userData.isMeFollow
        )}}
        <!-- 关注列表 -->
        <div>
          {{ follower.showFollower( count=userData.followData.count, userList=userData.followData.followList) }}
        </div>
        <!-- 粉丝列表 -->
        <div>
          {{ fans.showFans( count=userData.fansData.count, userList=userData.fansData.fansList) }}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block js %}
<script>
  $("#img-upload").click(function (e) {
    e.preventDefault();
    // 触发 $("#file-img") jquery 对象的点击事件
    $("#file-img").click();
  })

  // 图片上传 $("#file-img") input 标签
  $("#file-img").change(function () {
    // 获取到图片信息
    const file = $(this)[0].files[0];

    ajax.upload('/api/uploadImg', file, function (err, data) {
      if (err) {
        alert(err);
        return;
      };
      // console.log(data)
      $(".img-info").text(file.name);
      $("#file-img-url").val(data.url);
    })
  })

  // 发布微博
  $("#btn-publish").click(function (e) {
    e.preventDefault();
    // 获取内容 获取图片地址
    const content = $("#blog-content").val();
    // 1.代码补全
    const images = $("#file-img-url").val();
    if (!content) {
      alert("发表内容不能为空");
      return;
    }
    const data = { content };

    if(images) {    // 如果上传图片
      data.images = images;
    }

    // 2.传递内容和图片地址
    ajax.post("/api/blog/createBlog", data, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      console.log(data);
    });
  });
</script> {% endblock %}